<template>
  <el-card shadow="never" class="!border-none">
    <el-form :model="formData" inline>
      <el-form-item label="推销员名称">
        <el-input
          class="ls-input"
          v-model="formData.salesmanName"
          placeholder="请输入推销员名称"
        />
      </el-form-item>
      <!-- <el-form-item label="用户信息">
        <el-input
          class="ls-input"
          v-model="formData.userInfo"
          placeholder="请输入用户信息"
        />
      </el-form-item>
      <el-form-item label="服务名称">
        <el-input
          class="ls-input"
          v-model="formData.goodsName"
          placeholder="请输入服务名称"
        />
      </el-form-item>
      <el-form-item label="派单状态">
        <el-select
          v-model="formData.isDispatch"
          placeholder="请选择"
          class="ls-input"
        >
          <el-option label="全部" value></el-option>
          <el-option label="未派单" value="0"></el-option>
          <el-option label="已派单" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间查询方式">
        <el-select
          v-model="formData.timetype"
          placeholder="请选择"
          class="ls-input"
        >
          <el-option label="按周选择时间" :value="1"></el-option>
          <el-option label="按月选择时间" :value="2"></el-option>
          <el-option label="按季度选择时间" :value="3"></el-option>
          <el-option label="按半年选择时间" :value="4"></el-option>
          <el-option label="自由选择时间" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下单时间" v-if="formData.timetype == 1">
        <el-date-picker
          v-model="value1"
          type="week"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          placeholder="请选择周"
          @change="changeweek_value()"
        />
      </el-form-item>
      <el-form-item
        label="下单时间"
        v-if="
          formData.timetype == 2 ||
          formData.timetype == 3 ||
          formData.timetype == 4
        "
      >
        <el-date-picker
          v-model="value2"
          type="month"
          format="YYYY-MM"
          value-format="YYYY-MM-DD"
          placeholder="请选择月"
          @change="changeweek_value2()"
        />
      </el-form-item>
      <el-form-item label="下单时间" v-if="formData.timetype == 5">
        <data-picker
          class="ls-input"
          style="width: 280px"
          v-model:startTime="formData.orderTimeStart"
          v-model:endTime="formData.orderTimeEnd"
        ></data-picker>
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" @click="resetPage">查询</el-button>
        <el-button @click="resetParams">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card shadow="never" class="mt-4 !border-none">
    <el-button type="primary" @click="$router.push('editgoods')"
      >添加推销员服务</el-button
    >
    <div class="mt-4">
      <el-table
        ref="tableData"
        size="large"
        :data="pager.lists"
        v-loading="pager.loading"
      >
        <el-table-column property="name" label="服务名称" />
        <el-table-column property="price" label="服务价格" />
        <el-table-column label="服务图片">
          <template #default="{ row }">
            <el-image
              style="width: 60px; height: 60px"
              :src="baseUrl + 'api/uploads/' + row.image"
              :preview-src-list="[baseUrl + 'api/uploads/' + row.image]"
              :hide-on-click-modal="true"
              :preview-teleported="true"
              :fit="'contain'"
            />
          </template>
        </el-table-column>

        <el-table-column property="salesmanName" label="推销员名称" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <div>
              <router-link
                class="mr-2"
                :to="{
                  path: 'editgoods',
                  query: {
                    id: row.id,
                  },
                }"
              >
                <el-link type="primary" :underline="false">编辑</el-link>
              </router-link>
              <el-link type="danger" link @click="handleDelete(row.id)">
                删除
              </el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-end mt-4">
      <pagination v-model="pager" @change="getLists" />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { apigoogslsit, apigoogsdel } from "@/api/salesman";
import { reactive } from "vue";
import { OrderMode } from "@/enums/modeEnum";
import Pagination from "@/components/pagination/index.vue";
import DataPicker from "@/components/daterange-picker/index.vue";
import { usePaging } from "@/hooks/usePaging";
import { timeFormat } from "@/utils/util";
import { getLastDayOfWeek, getLastDayOfMonth } from "@/utils/timeformat";
import feedback from "@/utils/feedback";

interface formDataObj {
  salesmanName: string;
}

const orderMode: any = reactive<any>(OrderMode);
const formData = reactive<formDataObj>({
  salesmanName: "",
  //   userInfo: "",
  //   goodsName: "",
  //   payStatus: "",
  //   orderTimeStart: "",
  //   orderTimeEnd: "",
  //   orderStatus: "",
  //   staffInfo: "",
  //   isDispatch: "",
  //   timetype: 5,
});

const value1 = ref("");
const value2 = ref("");
const baseUrl = reactive(`${import.meta.env.VITE_APP_BASE_URL || ""}/`);

const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: apigoogslsit,
  params: formData,
});

const countData = ref<any>({});

function changeweek_value() {
  const timeStr = getLastDayOfWeek(value1.value);
  console.log(value1.value, timeStr, "111111111111111");

  formData.orderTimeStart = value1.value;
  formData.orderTimeEnd = timeStr;
}
function changeweek_value2() {
  const timeStr = getLastDayOfMonth(value2.value);
  formData.orderTimeStart = value2.value;
  formData.orderTimeEnd = timeStr;
  console.log(value2.value, timeStr, "111111111111111");
}

const handleDelete = async (id: number) => {
  await feedback.confirm("确定要删除？");
  await apigoogsdel({ id });
  feedback.msgSuccess("删除成功");
  getLists();
};

getLists();
// getOrderAmount();
</script>

<style lang="scss" scoped>
:deep() .el-tabs__content {
  padding: 0;
}
.ls-input {
  width: 280px;
}

.error {
  color: #db2828;
}

.goods-box {
  .goods-name {
    color: #333333;
  }
}

.goods-box:hover {
  .goods-name {
    color: #4a5dff;
    text-decoration: underline;
  }
}
a {
  text-decoration: none !important; //去掉原有链接文字下划线
}
.el-tabs__nav-wrap::after {
  height: 1px !important;
}
</style>
